<style lang="less">
@media print {
  ._wz_hiddenDangersTroubleshootDetails {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    //@page {
    //  size: landscape;
    //}
  }
}
</style>
<template>
  <div ref="hiddenDangersTroubleshootDetails" class="_wz_hiddenDangersTroubleshootDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="11%">
        <col width="23%">
        <col width="10%">
        <col width="23%">
        <col width="10%">
        <col width="22%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">
          隐患排查
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">隐患排查</td>
        <td colspan="3">{{!!riskListDetailEntityList.riskInspectName ? riskListDetailEntityList.riskInspectName : '--'}}</td>
        <td style="text-align: center;">排查状态</td>
        <td>
          <Tag color="error" type="dot" v-if="riskListDetailEntityList.riskInspectState == 0">未开始</Tag>
          <Tag color="primary" type="dot" v-if="riskListDetailEntityList.riskInspectState == 1">排查中</Tag>
          <Tag color="success" type="dot" v-if="riskListDetailEntityList.riskInspectState == 2">已完成</Tag>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">隐患部位</td>
        <td>{{!!riskListDetailEntityList.riskPositionName ? riskListDetailEntityList.riskPositionName : '--'}}</td>
        <td style="text-align: center;">隐患类型</td>
        <td>
          <Tag color="success" type="dot" v-if="riskListDetailEntityList.riskPositionType == 1">基础管理</Tag>
          <Tag color="primary" type="dot" v-if="riskListDetailEntityList.riskPositionType == 2">设备设施</Tag>
          <Tag color="warning" type="dot" v-if="riskListDetailEntityList.riskPositionType == 3">作业活动</Tag>
        </td>
        <td style="text-align: center;">特种设备</td>
        <td>{{!!riskListDetailEntityList.riskPositionDeviceState ? '是' : '否'}} </td>
      </tr>
      <tr>
        <td style="text-align: center;">排查数量</td>
        <td>{{!!riskListDetailEntityList.riskPositionItemCheckCount ? riskListDetailEntityList.riskPositionItemCheckCount :0}} / {{!!riskListDetailEntityList.riskPositionItemAllCount ? riskListDetailEntityList.riskPositionItemAllCount :0}}  项</td>
        <td style="text-align: center;">隐患数量</td>
        <td>{{!!riskListDetailEntityList.riskPositionItemAtCount ? riskListDetailEntityList.riskPositionItemAtCount :0}} 项</td>

        <td style="text-align: center;">排查类型</td>
        <td>
          <Tag color="primary" type="dot" v-if="riskListDetailEntityList.riskInspectType == 1">计划排查</Tag>
          <Tag color="success" type="dot" v-if="riskListDetailEntityList.riskInspectType == 2">主动排查</Tag>
        </td>
      </tr>
      <tr>
        <td style="text-align: center;">排查部门</td>
        <td>{{!!riskListDetailEntityList.riskInspectInOrgName ? riskListDetailEntityList.riskInspectInOrgName : '--'}}</td>
        <td style="text-align: center;">排查人员</td>
        <td>{{!!riskListDetailEntityList.riskInspectUserName ? riskListDetailEntityList.riskInspectUserName : '--'}}</td>
        <td style="text-align: center;">时间范围</td>
        <td>{{!!riskListDetailEntityList.riskInspectStartDate ? riskListDetailEntityList.riskInspectStartDate : '--'}}  至 {{!!riskListDetailEntityList.riskInspectEndDate ? riskListDetailEntityList.riskInspectEndDate : '--'}}</td>
      </tr>
      <tr>
        <td style="text-align: center;">运输企业</td>
        <td colspan="3">{{!!riskListDetailEntityList.deptName ? riskListDetailEntityList.deptName : '--'}}</td>
        <td style="text-align: center;">创建时间</td>
        <td>{{!!riskListDetailEntityList.createTime ? riskListDetailEntityList.createTime : '--'}}</td>
      </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" style="border-top: 0px;">
      <colgroup>
        <col width="11%">
        <col width="10%">
        <col width="20%">
        <col width="10%">
        <col width="20%">
        <col width="10%">
        <col width="19%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="7">排查清单</td>
      </tr>
      <template v-for="item,index in riskInspectItemList">
        <tr>
          <td rowspan="6"><Tag color="blue">第 {{index+1}} 项</Tag></td>
          <td>隐患项目</td>
          <td colspan="3">
            {{!!item.riskPositionItemName?item.riskPositionItemName:'--'}}
            <span style="cursor: pointer;color: #2d8cf0;" @click="seeSelectData = item;formOperation = true;" v-if="!!item.riskInspectItemProcess">排查情况</span>
          </td>
          <td>排查状态</td>
          <td>
            <Tag type="dot" color="warning" v-if="item.riskInspectItemProcess == 0">未排查</Tag>
            <Tag type="dot" color="primary" v-else>已排查</Tag>
          </td>
        </tr>
        <tr>
          <td>检查标准</td>
          <td colspan="5">{{item.riskPositionItemCriterion}}</td>
        </tr>
        <tr>
          <td>失控表现</td>
          <td colspan="5">{{item.riskPositionItemPerformance}}</td>
        </tr>
        <tr>
          <td>管控措施</td>
          <td colspan="5">{{item.riskPositionItemMeasures}}</td>
        </tr>
        <tr>
          <td>个人防护</td>
          <td colspan="5">{{item.riskPositionItemProtect}}</td>
        </tr>
        <tr>
          <td>应急措施</td>
          <td colspan="5">{{item.riskPositionItemBurst}}</td>
        </tr>
      </template>
      </tbody>
    </table>
    <Drawer title="详情" v-model="formOperation" width="1100" :mask-closable="false" :draggable="true">
      <hiddenDetails v-if="formOperation" :selectData="seeSelectData"></hiddenDetails>
    </Drawer>

  </div>
</template>
<script>

import hiddenDetails from "./hiddenDetails";// hiddenDetails  隐患详情

export default {
  components: {
    hiddenDetails,//隐患详情
  },
  props: ['selectData'],//接收来自父组件的数据
  data() {
    return {
      seeSelectData:{},
      riskListDetailEntityList:{},
      riskInspectItemList:[],
      formOperation:false,
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.riskListDetailEntityList = that.selectData;

    that.axios.post(that.apiUrl.riskInspectRiskInspectItemList, {riskInspectUuid:that.selectData.uuid}).then(res => {
      if (!!res) {
        that.riskInspectItemList = res.data.data;
      }
    }).catch(err => {
      console.log("失败", err)
    })

  },
  methods: {//执行的方法
    printTest() {
      this.$print(this.$refs.hiddenDangersTroubleshootDetails) // 使用
    },

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态
    window.onresize = null;
  }
}
</script>
<style lang="less">
._wz_hiddenDangersTroubleshootDetails {
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
